/*
Rojo		DF6262	C36464	B83D3D	E77676	E78383
Azul		4B6195	495B83	2E457B	637AB0	6B80B0
Amarillo	DFDF62	C3C364	B8B83D	E7E776	E7E783
Morado		794695	6D4682	5F2B7B	935EAF	9667AF
Verde		4FB34F	509C50	319331	65C665	70C670
Naranja		DFB562	C3A364	B88F3D	E7C176	E7C683
*/

/*

ROJO		FF0000	FF4040	FF7373
MORADO		7109AA	9F3ED5	AD66D5
AZUL		1240AB	4671D5	6C8CD5
VERDE		00CC00	39E639	67E667
AMARILLO	FFFF00	FFFF40	FFFF73
NARANJA		FFAA00	FFBF40	FFD073
*/


var Draw	= {
	ctx		: null,
	
	start		: function(nx, ny){
		Draw.ctx	= canvas.getContext('2d');

		var h = window.innerHeight;
		var w = h*(nx/ny);

		Draw.ctx.height = h;
		Draw.ctx.width  = w;
		
		Draw.ctx.canvas.height = h;
		Draw.ctx.canvas.width  = w;
		
		var panel = document.getElementById("panel");
		
		panel.width = w+"px";
		panel.height = h+"px";
		panel.style.width = w+"px";
		panel.style.height = h+"px";
		panel.style.marginLeft = "auto";
		panel.style.marginRight = "auto";
	},
	
	width	: 0,
	
	gradient	: function(x, y, w, h, colorA, colorB){
		var grd = Draw.ctx.createLinearGradient(x, y, w, h);
		grd.addColorStop(0, colorA);
		grd.addColorStop(1, colorB);
		Draw.ctx.fillStyle = grd;
		Draw.ctx.fillRect(x, y, w, h);
	},
	
	line		: function(ax, ay, bx, by, color){
		Draw.ctx.beginPath();
		Draw.ctx.strokeStyle	= color;
		Draw.ctx.moveTo(ax, ay);
		Draw.ctx.lineTo(bx, by);
		Draw.ctx.stroke();
		Draw.ctx.closePath();
	},

	rect		: function(x, y, w, h, color, stroke, border) {
		Draw.ctx.beginPath();
		Draw.ctx.fillStyle = color;
		Draw.ctx.rect(x, y, w-Draw.width, h-Draw.width);
		Draw.ctx.fill();
		if(stroke > 0){
			Draw.ctx.lineWidth = stroke;
			Draw.ctx.strokeStyle	= border;
			Draw.ctx.stroke();
		}
		Draw.ctx.closePath();
	},
	
	circle		: function(x, y, r, color, stroke, border) {
		if(stroke > 0){
			r = r-stroke/2;
		}
		Draw.ctx.beginPath();
		Draw.ctx.fillStyle	= color;
		
		var grd = Draw.ctx.createLinearGradient(x, y-r, x, y+r);
		grd.addColorStop(0, color);
		grd.addColorStop(1, border);
		Draw.ctx.fillStyle = grd;
		
		Draw.ctx.arc(x, y, r, 0, Math.PI*2, true);
		Draw.ctx.fill();
		if(stroke > 0){
			Draw.ctx.lineWidth = stroke;
			Draw.ctx.strokeStyle = border;
			Draw.ctx.stroke();
		}
		Draw.ctx.closePath();
	},

	lineWidth	: function(width){
		Draw.width = width;
	},

	textAlign	: function(align){
		Draw.ctx.textAlign = align;
	},

	textBase	: function(base){
		Draw.ctx.textBaseline = base;
	},

	textStyle	: function(style){
		Draw.ctx.font		= style;
	},

	textColor	: function(color){
		Draw.ctx.fillStyle	= color;
	},

	text		: function(x, y, text) {
		Draw.ctx.fillText(text, x, y);
	},
	
	textCenter	: function(x, y, w, h, text, color){
		Draw.textColor(color);
		Draw.textBase("middle");
		Draw.textAlign("center");
		Draw.text(x+w/2, y+h/2, text);
	},

	textLeft	: function(x, y, w, h, text, color){
		Draw.textColor(color);
		Draw.textBase("middle");
		Draw.textAlign("left");
		Draw.text(x, y, text);
	},

	rgbColor	: function(r, g, b){
		return Draw.rgbaColor(r, g, b, 1);
	},
	
	rgbaColor	: function(r, g, b, a){
		var R	= Math.round(255*(r/100));
		var G	= Math.round(255*(g/100));
		var B	= Math.round(255*(b/100));
		var A	= a;
		return "rgba("+R+", "+G+", "+B+", "+A+")";
	}
}
